<template>
  <div>
     <el-card shadow="never">
      <div>
            <article v-for="(item, index) in articleList" :key="index" class="media">
              <div class="media-content">
                <div style="font-size:18px">
                      <router-link :to="{name:'post-detail',params:{id:item.id}}">
                       {{ item.title }}
                       {{ item.content }}
                      </router-link>
                </div>
                <nav class="level has-text-grey is-mobile  is-size-8">
                   <div class="level-left" style="margin-top: 40px"  >
                      <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                        <el-avatar :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=identicon`"></el-avatar>
                      </router-link>
                      <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                        {{ item.alias }}
                      </router-link>
                      <span
                        v-for="(tag, index) in item.tags"
                        :key="index"
                        class="tag is-hidden-mobile is-info is-light mr-1">
                        <router-link :to="{ name: 'tag', params: { name: tag.name } }">
                          {{ "#" + tag.name }}
                        </router-link>
                      </span>
                      <i style="margin-right: 15px" class="el-icon-view" ><span style="margin-right:3px"></span>{{ item.view }}</i>
                      <i style="margin-right: 15px;" class="el-icon-chat-line-round" ><span style="margin-right:3px"></span>{{ item.comments}}</i>
                      <i style="margin-right: 15px;" class="el-icon-time"><span style="margin-right:3px"></span>{{ dayjs(item.createTime).format("YYYY/MM/DD") }}</i>
                    </div>
                </nav>
              </div>
              <div class="media-right" />
            </article>
      </div>


      <div v-show="page.total > 0">
        <pagination
        
        :total="page.total"
        :page.sync="page.current"
        :limit.sync="page.size"
        @pagination="init"
      />
      <div style="padding-left:40%">
      <el-button type="primary" round @click="back" v-show="page.current!=1">上一页</el-button>
      <el-button type="primary" round @click="next" v-show="page.current*page.size<page.total">下一页</el-button>
      </div>
      
      </div>
      
    </el-card>
  </div>

</template>

<script>
// @ is an alias to /src

import { getList } from '@/api/post'
import Pagination from '@/components/Pagination'
export default {
  name: 'TopicList',
  components : {Pagination},
  data(){
    return {
      activeName: 'latest',
      articleList: [],
      page: {
        current: 1,
        size: 10,
        total: 0,
        tab: 'latest'
      }
    }
  },
  created() {
     this.init(this.tab)
  },
  methods: {
     init(tab) {
      getList(this.page.current,this.page.size, tab).then((response) => {
        const { data } = response
        this.articleList = data.records
        this.page.current = data.current
        this.page.total = data.total
        this.page.size = data.size
      })
    },
    next(){
      this.page.current++;
      getList(this.page.current,this.page.size, this.tab).then((response) => {
        const { data } = response
        this.articleList = data.records
        this.page.current = data.current
        this.page.total = data.total
        this.page.size = data.size
      })
    },
    back(){
      this.page.current--;
      getList(this.page.current,this.page.size, this.tab).then((response) => {
        const { data } = response
        this.articleList = data.records
        this.page.current = data.current
        this.page.total = data.total
        this.page.size = data.size
      })
    },
  }
}
</script>
